<template>
  <div class="content">
    <div>
      <ul class="sub-nav">
        <li :class="{ active: article.groupId === group.id }" :key="group.id" v-for="group in groups"
          @click="doActive(group.id)">
          <el-button round> {{ group.name }}</el-button>
        </li>
      </ul>
    </div>

    <div>
      <el-upload class="upload-demo" action="http://songzhantao.cn:3001/uploadImage" :on-success="handleSuccess"
        name="imgFile" multiple>
        <el-button size="small" type="primary">点击上传图片</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        <div>{{ 'http://songzhantao.cn/public/' + result.fileName }}</div>
      </el-upload>
    </div>

    <div class="group"></div>

    <div class="top">
      <div>
        <input type="text" v-model="article.title" class="input" placeholder="标题" />
        <input type="password" v-model="key" class="input2" placeholder="密钥" />
      </div>

      <button class="btn" @click="submit">更新</button>
    </div>
    <div>
      <v-md-editor v-model="article.content" height="500px" :disabled-menus="[]"
        @upload-image="handleUploadImage"></v-md-editor>
    </div>

    <div></div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const key = ref('')

const groups = ref([])

/**
 * 当前文章
 */
const article = ref('')

onMounted(() => {
  getGroupList()
})

/**
 * 查询分类
 */
const getGroupList = async () => {
  await request('/groups').then((data) => {
    groups.value = data
  })
}

const doActive = (groupId: string) => {
  article.value.groupId = groupId
}

/**
 * 发布文章
 */
const submit = () => {
  if (article.value.title.trim().length === 0) {
    ElMessage.warning({ message: '请输入标题' })
    return
  }

  if (key.value !== 'tg92java') {
    return
  }

  request(`/admin/update`, article.value, 'PUT').then(() => {
    ElMessage.warning({ message: '更新成功哦' })
    article.value.title = ''
  })
}

const result = ref({})
const handleSuccess = (res) => {
  result.value = res.data
}

/**
 * 查找文章详情
 */
const findById = (id: string) => {
  request(`/admin/find?id=${id}`).then((data) => {
    article.value = data
  })
}
/**
 * 上传图片 
 * @param event 
 * @param insertImage 
 * @param files 
 */
const handleUploadImage = (event, insertImage, files) => {

  const formData = new FormData()
  formData.append('imgFile', files[0])

  // Upload using fetch
  fetch('http://songzhantao.cn:3001/uploadImage', {
    method: 'POST',
    body: formData
  })
    .then(response => response.json())
    .then(data => {
      // Insert the uploaded image URL
      insertImage({
        url: 'http://songzhantao.cn/public/' + data.data.fileName,
        desc: files[0].name
      })
    })
    .catch(error => {
      console.error('Error uploading image:', error)
    })



}

/**
 * 暴漏属性和方法
 */
defineExpose({ findById })
</script>
<style scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-content: start;
  justify-items: start;
}

.input {
  width: 400px;
  height: 40px;
  padding: 1rem;
  outline: none;
  border: 1px solid gainsboro;
  margin-bottom: 1rem;
}

.input2 {
  width: 100px;
  height: 40px;
  padding: 1rem;
  outline: none;
  border: 1px solid gainsboro;
  margin-bottom: 1rem;
  margin-left: 5px;
}

.btn {
  padding: 0.5rem;
  width: 100px;
  height: 40px;
  outline: none;
  border: none;
  background-color: #e0575b;
  color: white;
  cursor: pointer;
}

.top {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.sub-nav {
  display: flex;
  margin-left: 8rem;
  margin-top: 1rem;
}

.active {
  border-bottom: 1px solid #e0575b;
  font-size: 1.2rem;
}

.sub-nav li {
  height: 3rem;
  width: 6rem;
  line-height: 3rem;

  text-align: center;
  cursor: pointer;
}

.sub-nav li:hover {
  color: #e0575b;
}
</style>
